<template>
  <div id="insertmarks">
  	<el-menu :default-active="activeIndex2" class="el-menu-vertical-demo" mode="horizontal" background-color="white" active-text-color="#409EFF">
		  <el-menu-item v-for="tab2 in tabs2" :index="tab2.tab2index" v-bind:key="tab2.tab2name" v-on:click="currentTab2 = tab2.tab2name">
		  	<span slot="title">{{tab2.tab2name}}</span>
		  </el-menu-item>
	</el-menu>

	<component v-bind:is="currentTab2Component" class="tab2"></component>

  </div>
  
</template>

<script>
  import Intask from './intask'
  import Intest from './intest'
  import Inexam from './inexam'
 export default {
  	data(){
  		return{
  			currentTab2:'作业成绩',
  			tabs2:[
  				{
  					tab2name:'作业成绩',
  					tab2index:'1'
  				},
  				{
  					tab2name:'测试成绩',
  					tab2index:'2'
  				},
  				{
  					tab2name:'考试成绩',
  					tab2index:'3'
  				}
  			],
  			activeIndex2:'1'
  		}
  	},
  	computed:{
  		currentTab2Component:function(){
  			if (this.currentTab2=="作业成绩") {
  				return 'tab2-intask'.toLowerCase();
  			}else if (this.currentTab2=="测试成绩") {
  				return 'tab2-intest'.toLowerCase();
  			}else if (this.currentTab2=="考试成绩") {
  				return 'tab2-inexam'.toLowerCase();
  			}
  		}
  	},
  	components:{
  		"tab2-intask":Intask,
  		"tab2-intest":Intest,
  		"tab2-inexam":Inexam
  	}
}
</script>

<style type="text/css">
  #insertmarks{
  	margin-left: 12.5%;
  }
  .tab2{
    border: 1px solid #ccc;
    padding: 10px;
  }
</style>